<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="../css/960.css" rel="stylesheet" type="text/css"/>
<link href="../css/webui.css" rel="stylesheet" type="text/css"/>
<link href="../css/webui-menus.css" rel="stylesheet" type="text/css"/>
<link href="../css/gh-buttons.css" rel="stylesheet" type="text/css"/>
<title>Test WebUI</title>
</head>

<body class="silverbg">

<div class="container_12">
	<div class="head coffeebg container_12">
    		<div class="logo grid_8 alpha">
            	<h1 class="white">WebUI-FrameWork</h1>
            </div>
             <div class="grid_4 omega">
            	<ul  class=" linkbar white">
                   <li><a href="#">welcome: Mr </a></li>
                    <li><a href="#" class="orange-l1">my account </a></li>
                    <li><span>my account </span></li>
                </ul>
            </div>
    </div> 
    <div class="clear"></div>
    
    <div class="container_12 alpha omega menubar-alpha  blackbg ">
         <ul class="grid_9 alpha menu-alpha blackbg ">
         		<li><a href="#">首页</a></li>
                <li class="current"><a href="#">工具下载</a></li>
                 <li><a href="#">文档教程</a></li>
                <li><a href="#">项目</a></li>
         </ul>
         
         <div class="grid_3 omega">
            <input type="text" name="search" id="search" class="search-input" style="width:100px;" /> 
         </div>
    </div>
     <div class="clear"></div>
    
     
    
     
   <div id="content" class="container_12 ">  
   		
        <div class="clear-spacer"></div>
   
   	 <div class="grid_12 alpha ">
        <div class="">
            <img src="../images/demo/silde1.jpg" width="960"/>
        </div>
       
    </div>
    <div class="clear"></div>
    <div class="box-shadow-big">
        <div class="shadow-left"></div>
        <div class="shadow-right"></div>
     </div>
    
     <div class="clear-spacer"></div>
     
     <div class="grid_12 pathbar-alpha">
          <a href="#">首页</a>&nbsp;&nbsp; \&nbsp;&nbsp;  <a href="#">科技新闻</a>&nbsp;&nbsp;  \&nbsp;&nbsp;  <span>新闻内容</span>
     </div>
     <div class="clear"></div>
  
     
     <div class="grid_12 ">
        <div class="grid_8 alpha omega  silvergbg1">
          <div class="panel ">
                 <div class="article">
                        
                 		<h2>世界首个无线充电智能手机正式发售</h2>
                        <h3>2011年8月6日 8:20  &nbsp;&nbsp;&nbsp;&nbsp;中国新闻网 <a href="#" class="blue">我要评论(1)</a></h3>
                        <p>日本最大电信运营商NTT Docomo联合夏普于上周末正式发售了世界首个自带无线充电功能的智能手机&quot;AQUOS PHONE f SH-13C&quot;。这款智能机运行Android 2.3操作系统，产品自身附带夏普&quot;Qi&quot;无线充电器&quot;Wireless Charger SH01&quot;，将手机置于其上即可充电，无需连接任何线缆。</p>
                        <p> 同时该机附带IPX5/IPX7级别的防水功能和IP5X级别的防尘功能，作为典型的日系手机还拥有其他许多同类产品不再具备的红外通信功能。产品采用一块3.7英寸夏普制qHD（分辨率960*540）触控屏。采用800万像素CMOS摄像头，可进行720p MP4影片录制。硬件配置方面，CPU为高通MSM8255 1GHz，内置512MB RAM和2GB ROM，支持最大32GB的microSD卡扩展，支持802.11 b/g/n WiFi和GSM/WCDMA/HSDPA。</p>
                        <p> 这款手机外形方面仍然是夏普一贯的设计风格，尺寸仅为119*60*10.9mm，最厚处约11.5mm，重量约121g，有3种颜色（黑、白、粉）外壳的型号可选。 </p>
                        <p><a href="#">日本最大电信运营商</a>NTT Docomo联合夏普于上周末正式发售了世界首个自带无线充电功能的智能手机&quot;AQUOS PHONE f SH-13C&quot;。这款智能机运行Android 2.3操作系统，产品自身附带夏普&quot;Qi&quot;无线充电器&quot;Wireless Charger SH01&quot;，将手机置于其上即可充电，无需连接任何线缆。</p>
                         <span class="more"><a href="#">查看更多内容</a></span>
                 </div>
          </div>
          <div class="box-shadow-big">
               		<div class="shadow-left"></div>
                    <div class="shadow-right"></div>
               </div>
        </div>
        <div class="grid_4 omega" >
          
          <div class="box-l1 silverbg">
                 <ul class="vmenu vmenu-icon">
                    <li class="current"><a href="#">回到首页<span class="intro">返回到首页</span></a></li>
                    <li><a href="#">看看软件</a></li>
                    <li><a href="#">浏览项目</a></li>
                     <li><a href="#">home</a></li>
                    <li><a href="#">soft</a></li>
                    <li><a href="#">项目</a></li>
                </ul>
          </div>
          
          <div class="spacer"></div>
          
     <div class=" silvergbg2 panel">
     
                 <div class="phead graybd-l1-bottom silverbg">
					 <!--<span class="more1"><a href="#">更多...</a></span>                    
                     <h1>标题1</h1>
                     -->
                     <span class="more4"><a href="#">更多...</a></span>                    
                     <h4 class="red">标题4</h4>
                 </div>
                 
                 <div class="pcontent">
                       
                        <ul class="vlist ">
                            <li><a href="#" class="blue">央视记者采访溃坝化工企业遭数十人围殴(组图)</a></li>
                            <li><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></li>
                            <li><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></li>
                            <li><a href="#">央视记者采访溃坝化工企业遭数十人围殴(组图)</a></li>
                            <li><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></li>
                            <li><a href="#">央视记者采访溃坝化工企业遭数十人围殴(组图)</a></li>
                             <li><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></li>
                            <li><a href="#">央视记者采访溃坝化工企业遭数十人围殴(组图)</a></li>
                            <li><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></li>
                            <li><a href="#">央视记者采访溃坝化工企业遭数十人围殴(组图)</a></li>
                       </ul>
           </div>
          </div>
        </div>
    </div>
    <div class="clear-spacer"></div>
    
    
    <div class="grid_12">
            <div class="toolbar-big"> 
                      <ul> 
                        <li class="current">  <a href="#">  <span class="icon icon-dashboard"></span> 控制台</a> </li> 
                        
                        <li> 
                          <a href="#"> 
                            <span class="icon icon-pencil"></span> 
                            表单
                          </a> 
                        </li> 
                        
                        <li > 
                          <a href="#"> 
                            <span class="icon icon-tables"></span> 
                            数据表
                          </a> 
                        </li> 
         
                        <li > 
                          <a href="#"> 
                            <span class="icon  icon-chart"></span> 
                            <span class="badge">3</span> 
                            统计
                          </a> 
                        </li> 
                        
                        <li > 
                          <a href="#"> 
                            <span class="icon icon-modal"></span> 
                            通知
                          </a> 
                        </li> 
         
                        <li > 
                          <a href="#"> 
                            <span class="icon icon-newspaper"></span> 
                            印刷
                          </a> 
                        </li> 
         
                        <li > 
                          <a href="#"> 
                            <span class="icon icon-anchor"></span> 
                              按钮
                          </a> 
                        </li>               
                      </ul> 
            </div>   
    </div>  
     
     
     <div class="grid_12">
   	   <table border="0" cellspacing="0" cellpadding="0" class="table table-big">
     	   <tr>
     	     <th width="5%" scope="col">序号&nbsp;</th>
     	     <th width="44%" scope="col">标题&nbsp;</th>
     	     <th width="11%" scope="col">分类&nbsp;</th>
     	     <th width="20%" scope="col">主题词&nbsp;</th>
     	     <th width="20%" scope="col">操作&nbsp;</th>
   	     </tr>
     	   <tr>
     	     <td>1</td>
     	     <td>
     	       <a href="#">央视记者采访溃坝化工企业遭数十人围殴(组图)</a></li>
   	         </td>
     	     <td>国内</td>
     	     <td>央视，企业</td>
     	     <td>
                <a href="#" class="button icon edit">编辑</a>
                <a href="#" class="button icon remove danger">删除</a>
              </td>
   	     </tr>
     	   <tr>
     	     <td>2</td>
     	     <td><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></td>
     	     <td>社会</td>
     	     <td>郑州，志愿者</td>
     	     <td>
                <a href="#" class="button icon edit">编辑</a>
                <a href="#" class="button icon remove danger">删除</a>
             </td>
   	     </tr>
     	   <tr>
     	     <td>3</td>
     	     <td><a href="#">郑州巡防队阻止志愿者下水救人 称要打捞许可证</a></td>
     	     <td>地方</td>
     	     <td>郑州，志愿者</td>
     	     <td>
                <a href="#" class="button icon edit">编辑</a>
                 <a href="#" class="button icon remove danger">删除</a>
              </td>
   	     </tr>
     	   <tr>
     	     <td>4</td>
     	     <td><a href="#">郑州巡防队阻止志愿者下水救人 称要作为典型的日系手机</a></td>
     	     <td>地方</td>
     	     <td>&nbsp;</td>
     	     <td>
                 <a href="#" class="button icon edit">编辑</a>
                 <a href="#" class="button icon remove danger">删除</a>
             </td>
   	     </tr>
   	   </table>
     </div>
      <div class="clear"></div>
      <div class="spacer"></div>
      
      <div class="grid_3">
      		<div class="panel panel-success">
                 <p>成功信息...</p>
            </div>
              <div class="box-shadow">
               		<div class="shadow-left"></div>
                    <div class="shadow-right"></div>
               </div>
      </div>
      
      <div class="grid_3">
      		<div class="panel panel-info">
                 <p>通知信息...</p>
            </div>
             <div class="box-shadow">
               		<div class="shadow-left"></div>
                    <div class="shadow-right"></div>
               </div>
      </div>
      
       <div class="grid_3">
      		<div class="panel panel-warning">
                 <p>警告信息...</p>
            </div>
             <div class="box-shadow">
               		<div class="shadow-left"></div>
                    <div class="shadow-right"></div>
               </div>
      </div>
      
      <div class="grid_3">
      		<div class="panel panel-error">
                 <p>错误信息...</p>
                 
            </div>
             <div class="box-shadow">
               		<div class="shadow-left"></div>
                    <div class="shadow-right"></div>
               </div>
      </div>
      
      <div class="clear"></div>
      <div class="spacer"></div>
      
      
      
       <div class="grid_12 ">
   	   <table border="0" cellspacing="0" cellpadding="0" class="table2">
     	   <tr>
     	     <th width="11%" scope="col">序号&nbsp;</th>
     	     <th width="38%" scope="col">标题&nbsp;</th>
     	     <th width="11%" scope="col">分类&nbsp;</th>
     	     <th width="20%" scope="col">主题词&nbsp;</th>
     	     <th width="20%" scope="col">操作&nbsp;</th>
   	     </tr>
     	   <tr>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
   	     </tr>
     	   <tr class="odd">
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
   	     </tr>
     	   <tr>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
   	     </tr>
     	   <tr class="odd">
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
     	     <td>&nbsp;</td>
   	     </tr>
   	   </table>
     </div>
      <div class="clear"></div>
      <div class="spacer"></div>
      

      
      <div class="grid_4">
          <div class="panel whitebg graybd-l1">
              <div class="phead blue ">
                  <h3>标题3</h3>
              </div>
              <div class="pcontent cards">
              		<div class="item">
                        <div class="pic grid_1 alpha">
                           <a href="#"><img src="../images/demo/thumb1.jpeg" /></a>
                        </div>
                        <div class="info ">
                             <h3><a href="#" class="blue">图片标题</a></h3>
                        
                             <p>以原址位于天蝎小猪新浪博客的网刊《推理月报》为主打内容，...</p>
                        </div>
                    </div>
                    <div class="clear"></div>
                    
                    <div class="item">
                        <div class="pic grid_1 alpha">
                           <a href="#"><img src="../images/demo/thumb1.jpeg" /></a>
                        </div>
                        <div class="info">
                             <h3><a href="#" class="blue">图片标题</a></h3>
                             <p>图片描述...</p>
                        </div>
                    </div>
                   
                    <div class="clear"></div> 
                    
                    <div class="item">
                        <div class="pic grid_1 alpha" >
                           <a href="#"><img src="../images/demo/thumb1.jpeg" /></a>
                        </div>
                        <div class="info">
                             <h3><a href="#" class="green">图片标题</a></h3>
                             <p>图片描述...</p>
                        </div>
                    </div>
                   
                     <div class="clear"></div>
                    
               </div>
              
          </div>
           <div class="box-shadow">
               		<div class="shadow-left"></div>
                    <div class="shadow-right"></div>
               </div>
      </div>
      
      <div class="grid_8">
          <div class="panel round silvergbg2">
              <div class="phead blue">
                  <h3>标题3</h3>
              </div>
              <div class="pcontent cards">
              		<div class="item">
                        <div class="pic grid_1 alpha">
                           <a href="#"><img src="../images/demo/thumb1.jpeg" /></a>
                        </div>
                        <div class="info">
                             <h3><a href="#" class="blue">图片标题</a></h3>
                             <p>作者：sind</p>
                             <p>以原址位于天蝎小猪新浪博客的网刊《推理月报》为主打内容，...</p>
                        </div>
                    </div>
                    <br class="clearf"/>
               </div>
           </div>              
      </div>
      
       <div class="clear"></div>
      <div class="spacer"></div>
      
       <div class="grid_4">
           <div class="box silvergbg">
              <div class="phead orange">
                  <h3>标题3</h3>
              </div>
              <div class="pcontent cards pad5">
              		<div class="item">
                       
                        <div class="info">
                             <h3><a href="#" class="blue">图片标题</a></h3>
                             <p>作者：sind</p>
                             <p>以原址位于天蝎小猪新浪博客的网刊《推理月报》为主打内容，...</p>
                        </div>
                    </div>
                    <br class="clearf"/>
                    <div class="item">
                       
                        <div class="info">
                             <h3><a href="#" class="blue">图片标题</a></h3>
                             <p>图片描述...</p>
                        </div>
                    </div>
                    <br class="clearf"/>
                    <div class="item">
                        
                        <div class="info">
                             <h3><a href="#" class="green">图片标题</a></h3>
                             <p>图片描述...</p>
                        </div>
                    </div>
                    <br class="clearf"/>
              </div>
          </div>            
      </div>
      
       <div class="grid_8">
          <div class="panel  silvergbg2">
              <div class="phead blue">
                  <h3>标题3</h3>
              </div>
              <div class="pcontent cards">
              		
                        <div class="picf">
                           <a href="#"><img src="../images/demo/thumb13.jpeg" /></a>
                        </div>
                        <div class="picf">
                           <a href="#"><img src="../images/demo/thumb11.jpeg" /></a>
                        </div>
                       <div class="picf">
                           <a href="#"><img src="../images/demo/thumb1.jpeg" /></a>
                        </div>
                        <div class="picf">
                           <a href="#"><img src="../images/demo/thumb12.jpeg" /></a>
                        </div>
                        <div class="picf">
                           <a href="#"><img src="../images/demo/thumb1.jpeg" /></a>
                        </div>
                        <div class="picf">
                           <a href="#"><img src="../images/demo/thumb12.jpeg" /></a>
                        </div>
                        <div class="picf">
                           <a href="#"><img src="../images/demo/thumb1.jpeg" /></a>
                        </div>
                        <div class="picf">
                           <a href="#"><img src="../images/demo/thumb11.jpeg" /></a>
                        </div>
                        <div class="picf">
                           <a href="#"><img src="../images/demo/thumb1.jpeg" /></a>
                        </div>
                        <div class="picf">
                           <a href="#"><img src="../images/demo/thumb13.jpeg" /></a>
                        </div>
                        <div class="picf">
                           <a href="#"><img src="../images/demo/thumb1.jpeg" /></a>
                        </div>
                  
                    <div class="clearf"></div>
               </div>
           </div>              
      </div>
      
      <div class="clear"></div>
      <div class="spacer"></div>
      
      
        
      
       <div class="grid_12">
          <div class="panel silvergbg1">
              <div class="phead orange">
                  <h3>标题3</h3>
              </div>
              <div class="pcontent cards">
              		<div class="item">
                        <div class="pic grid_2 alpha">
                           <a href="#"><img src="../images/demo/thumb-book.jpg"/></a>
                        </div>
                        <div class="info">
                             <h3><a href="#" class="blue">图片标题</a></h3>
                             <p>一本撼动数亿人心灵的勇气之书！没有一本书，比力克的故事更能带给你希望！<br />
                             他82年出生，生下来就和我们不一样，连妈妈都不想碰他一下！十岁之前三次想要自杀！中学当选为学生会副主席，本科获得两个学位！游泳冲浪踢足球样样全能，他走遍34个国家，演讲1500余场，给人信心、希望、爱和勇气！他就是力克·胡哲！</p>
                        </div>
                    </div>
                   
               </div>
               <div class="clear"></div> 
           </div>
           
      </div>
              
      
      <div class="clear"></div>
      <div class="spacer"></div>
      <div class="grid_12 silverbg panel pad10-tb">
       <div class="grid_2 ">
            <dl class="vlist">
            	<dt><a href="#">新手上路</a></dt>
                <dd><a href="#">新手学堂</a></dd>
                <dd><a href="#">服务中心</a></dd>
                <dd><a href="#">新手体验专区</a></dd>
            </dl>
      </div>
      <div class="grid_2 alpha">
            <dl class="vlist">
            	<dt><a href="#">新手上路</a></dt>
                <dd><a href="#">新手学堂</a></dd>
                <dd><a href="#">服务中心</a></dd>
                <dd><a href="#">新手体验专区</a></dd>
            </dl>
      </div>
      <div class="grid_2">
            <dl class="vlist">
            	<dt><a href="#">新手上路</a></dt>
                <dd><a href="#">新手学堂</a></dd>
                <dd><a href="#">服务中心</a></dd>
                <dd><a href="#">新手体验专区</a></dd>
            </dl>
      </div>
        <div class="grid_2">
            <dl class="vlist">
            	<dt><a href="#">新手上路</a></dt>
                <dd><a href="#">新手学堂</a></dd>
                <dd><a href="#">服务中心</a></dd>
                <dd><a href="#">新手体验专区</a></dd>
            </dl>
      </div>
      <div class="grid_2">
            <dl class="vlist">
            	<dt><a href="#">新手上路</a></dt>
                <dd><a href="#">新手学堂</a></dd>
                <dd><a href="#">服务中心</a></dd>
                <dd><a href="#">新手体验专区</a></dd>
            </dl>
      </div>
      <div class="grid_2 omega">
            <dl class="vlist">
            	<dt><a href="#">新手上路</a></dt>
                <dd><a href="#">新手学堂</a></dd>
                <dd><a href="#">服务中心</a></dd>
                <dd><a href="#">新手体验专区</a></dd>
            </dl>
      </div>
      </div>
    
     <div class="clear"></div>
      <div class="spacer"></div>  
   </div>  
   
  
    
      
      <div class="grid_12  foot "  >
             <div><a href="#">welcome: Mr </a>  |  <a href="#" class="orange-l1">my account </a> | <span>my account </span></div>
             <p>copy rights  汉龙数码科技有限公司2001－2011</p>
      </div>
      <div class="clear"></div>
       <div class="spacer"></div>
      
</div><!--end container-->


</body>
</html>
